<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商城首页</title>
    <script src="boot&jquery/jquery-3.5.1.js"></script>
    <link rel="stylesheet" href="boot&jquery/css/bootstrap.css">
    <link rel="stylesheet" href="boot&jquery/css/bootstrap-theme.css">
    <script src="boot&jquery/js/bootstrap.js"></script>
    <script src="boot&jquery/js/npm.js"></script>
    <script language="JavaScript">
        if (window != top)
            top.location.href = location.href;
    </script>
    <style>
        #geren{
            position: fixed;
            z-index: 100;
            margin-left: 1200px;
            margin-top: -60px;
        }
        .page-header{
            border-style: none;
        }
    </style>

    <script>

        //页面加载完毕时执行
        $(function () {
            findNumber();
            denglu();
            findMore();
        })

        //登录后更换显示信息
        function denglu() {
            $.ajax({
                url:"/Book/mainhomepage?op=getSession",
                type:"post",
                dataType:"json",
                sync: false,
                success:function (uname) {
                    if(uname!=null && uname!=""){
                        let html1 = "";
                        html1+= "<p style='color: #2D6CA3; margin-right: 10px'>"+
                            "<span>"+uname+"!您好,欢迎光临!</span>"+
                            "&nbsp;&nbsp;"+
                            "<input type='button' onclick='removeSession()' value='[安全退出]' class='btn btn-primary btn-sm'/>"+
                            "</p>"
                        $("#denglu").html(html1);
                    }else {
                        let html2 = "";
                        html2+= "<p>"+
                            "&nbsp;&nbsp;&nbsp;&nbsp;"+
                            "[<a href='/Book/UserPersonalCenter/UserloginPage.html'>登录</a>"+
                            "&nbsp;"+
                            "<a href='/Book/UserPersonalCenter/UserloginPage.html'>免费注册</a>]"+
                            "</p>"
                        $("#denglu").html(html2);
                    }

                }
            })
        }

        //安全退出
        function removeSession() {
            $("#number").text(0);
            $.ajax({
                url: "/Book/mainhomepage?op=removeSession",
                type: "post",
                dataType: "json",
                sync: true,
                success:function (b) {
                    window.location.href=location.origin+"/Book/MainHomePage.html";
                }
            })

        }

        //单击个人中心按钮进行跳转
        function tiaozhuan() {
            $("[name=frame]").prop("src","/Book/MainHomePage.html?PersonalCenter");
        }

        //查询书籍类型
        function findMore() {
            $.ajax({
                url:"/Book/booktype?op=findMore",
                type:"post",
                dataType:"json",
                sync:false,
                success:function (list) {
                    let html = "";
                    for (let i in list) {
                        let q = list[i];
                        html+="<li><a href='javascript:findByID("+q.tid+")'>"+q.tname+"</a></li>";
                    }
                    $("#type").html(html);
                }
            })
        }

        //传入list给展示页面
        function findByID(tid){
            $("[name=frame]").prop("src","/Book/UserPersonalCenter/MallHomePageDetailsDisplay.html?tid="+tid);
        }


    </script>
</head>
<body>

<div class="page-header">
    <h1 style="margin-left: 20px;">图书商城</h1>
    <div id="geren">
        <p>
            <a target="frame" href="/Book/MainHomePage.html?PersonalCenter">个人中心</a>&nbsp;|
            <a target="frame" href="/Book/MainHomePage.html?PersonalCenter">我的订单</a>|
        </p>
        <p id="denglu">
            &nbsp;&nbsp;&nbsp;&nbsp;
            [<a href="/Book/UserPersonalCenter/UserloginPage.html">登录</a>&nbsp;
            <a href="/Book/UserPersonalCenter/UserloginPage.html">免费注册</a>]
        </p>
    </div>
</div>


<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="/Book/MainHomePage.html">首页</a>
        </div>
        <div>
            <!--向左对齐-->
            <ul class="nav navbar-nav navbar-left">
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                        图书类型
                        <b class="caret"></b>
                    </a>
                    <ul class="dropdown-menu" id="type">
                        <li>
                        </li>
                    </ul>
                </li>
            </ul>
            <p class="navbar-text navbar-left">
                <button type="button" class="dropdown-toggle" onclick="tiaozhuan()">个人中心</button>
            </p>
            <p class="navbar-text navbar-left">
            <a target="frame" href="/Book/UserPersonalCenter/ShoppingPage/ShoppingCartPage.html" >购物车</a>
            </p>
            <form class="navbar-form navbar-right" role="search" style="margin-right: 40px">
                <div class="btn-group btn-group-lg" id="gouwu">
                    <div class="btn-group">
                        <button type="button" class="btn btn-primary "><a target="frame" href="/Book/UserPersonalCenter/ShoppingPage/ShoppingCartPage.html" style="color: white">购物车<span id="number"></span>件</a></button>
                        <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
                            <span class="caret"></span>
                            <span class="sr-only">切换下拉菜单</span>
                        </button>
                        <ul class="dropdown-menu" role="menu">
                            <li><a href="#">功能</a></li>
                        </ul>
                        <input type="button" class="btn btn-primary" value="去结算"/>
                    </div>
                </div>
            </form>
        </div>
    </div>
</nav>

    <iframe height="1500px" width="100%" name="frame" src="/Book/UserPersonalCenter/MallHomePageDetailsDisplay.html" style="border-style: none"></iframe>
</body>
    <script>

        //查询购物车中有几件商品
        function findNumber(){
            $.ajax({
                url:"/Book/mainhomepage?op=findNumber",
                type:"post",
                dataType:"json",
                sync:true,
                success:function (number) {
                    $("#number").text(number);
                }
            })
        }

        //判定首页显示哪个页面
        $(function () {
           let url = window.location.href;
           let u = url.split("?")[1];
           if(u!= "undefined" && u == "PersonalCenter"){
               $("[name=frame]").prop("src","/Book/UserPersonalCenter/PersonalCenter.html");
           }
        })
    </script>
</html>
